import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DragulaService } from 'ng2-dragula';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnDestroy {
    MANY_ITEMS = 'MANY_ITEMS';
    public many = ['The', 'possibilities', 'are', 'endless!'];
    public many2 = ['Explore', 'them'];

    subs = new Subscription();

    public constructor(private dragulaService: DragulaService) {
        this.subs.add(
            dragulaService
                .dropModel(this.MANY_ITEMS)
                .subscribe(
                    ({
                        el,
                        target,
                        source,
                        sourceModel,
                        targetModel,
                        item
                    }) => {
                        console.log('dropModel:');
                        console.log(el);
                        console.log(source);
                        console.log(target);
                        console.log(sourceModel);
                        console.log(targetModel);
                        console.log(item);
                    }
                )
        );
        this.subs.add(
            dragulaService
                .removeModel(this.MANY_ITEMS)
                .subscribe(({ el, source, item, sourceModel }) => {
                    console.log('removeModel:');
                    console.log(el);
                    console.log(source);
                    console.log(sourceModel);
                    console.log(item);
                })
        );
    }

    ngOnDestroy() {
        this.subs.unsubscribe();
    }
}
